iT邦幫忙

2023 iThome 鐵人賽

DAY 13
0
Mobile Development

[Android Studio & Spring boot 30天挑戰]系列 第 13

[Android Studio & Spring boot 30天挑戰] Day13- Lottie 動畫

  • 分享至 

  • xImage
  •  

今天要介紹的是 Lottie 動畫。Lottie 是一個好用的工具,可以讓我們在我們的應用程序中輕鬆添加引人注目的動畫效果,而不需要從頭開始設計每個動畫細節。通過將從 Lottie 官網 導出的 JSON 文件,我們可以在 Android Studio 專案中使用 Lottie 庫來實現這些動畫。/images/emoticon/emoticon08.gif

程式碼

首先我們要到 build.gradle 加入依賴。

dependencies {
    implementation 'com.airbnb.android:lottie:6.1.0'
}

再來到 Lottie 官網選擇一個你要的動畫並下載他的 Json 檔。

https://ithelp.ithome.com.tw/upload/images/20230820/20150369Ss19HfDVTG.png

之後來到 Android Studio 選擇 Project。

https://ithelp.ithome.com.tw/upload/images/20230820/20150369SsPcx5IdWa.png

之後在 Main 右鍵新增一個 Directory 選擇 assets ,就可以把 json 檔放進去。

https://ithelp.ithome.com.tw/upload/images/20230820/20150369uVnTREyogI.png

接下來就可以來到 layout 上加入 LottieAnimationView 就可以了。

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.airbnb.lottie.LottieAnimationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_autoPlay="true" //自動撥放
        app:lottie_loop="true" //循環播放
        app:lottie_fileName="test.json" //要播放的動畫
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    
</androidx.constraintlayout.widget.ConstraintLayout>

來看看成果吧!!!!

https://ithelp.ithome.com.tw/upload/images/20230820/20150369TLbmoGjDj5.png


上一篇
[Android Studio & Spring boot 30天挑戰] Day12- 摩斯密碼發送(下)
下一篇
[Android Studio & Spring boot 30天挑戰] Day14- MQTT(上)
系列文
[Android Studio & Spring boot 30天挑戰]30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言